// components/jin-uni-weixin/uni-transition.js
Component({
  properties: {
    show: {
      type: Boolean,
      default: false
    },
    modeClass: {
      type: Array,
      default () {
        return []
      }
    },
    duration: {
      type: Number,
      default: 300
    },
    styles: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data: {
    isShow: false,
    transform: '',
    stylesObject: '',
    ani: {
      in: '',
      active: ''
    }
  },
  timer: null, // 定时器
  // 监听父级属性变化
  observers: {
    show(newVal) {
      if (newVal) {
        this.open()
      } else {
        this.close()
      }
    },
    styles(newVal) {
      let styles = {
        ...newVal,
        'transition-duration': this.data.duration / 1000 + 's'
      }
      let transfrom = ''
      for (let i in styles) {
        let line = this.toLine(i)
        transfrom += line + ':' + styles[i] + ';'
      }
      this.setData({
        stylesObject: transfrom
      })
    }
  },
  methods: {
    // 输出过渡动画的状态
    change() {
      console.log(this.data.isShow)
    },
    // 打开
    open() {
      clearTimeout(this.timer)
      let ani = this.data.ani
      let transform = ''
      this.setData({
        isShow: true,
        transform: transform,
        ani: ani
      })
      for (let i in this.getTranfrom(false)) {
        if (i === 'opacity') {
          ani.in = 'fade-in'
        } else {
          transform += `${this.getTranfrom(false)[i]} `
        }
      }
      this.setData({
        ani: ani,
        transform: transform
      })
      wx.nextTick(() => {
        setTimeout(() => {
          this._animation(true)
        }, 50)
      })
    },
    // 关闭
    close() {
      clearTimeout(this.timer)
      this._animation(false)
    },
    // 动画
    _animation(type) {
      let styles = this.getTranfrom(type)
      let ani = this.data.ani
      let transform = ''
      this.setData({
        transform: transform
      })
      for (let i in styles) {
        if (i === 'opacity') {
          ani.in = `fade-${type?'out':'in'}`
        } else {
          transform += `${styles[i]} `
        }
      }
      this.setData({
        ani: ani,
        transform: transform
      })
      this.timer = setTimeout(() => {
        if (!type) {
          this.setData({
            isShow: false
          })
        }
      }, this.data.duration)
    },
    // 获取过渡属性
    getTranfrom(type) {
      let styles = {
        transform: ''
      }
      this.data.modeClass.forEach((mode) => {
        switch (mode) {
          case 'fade':
            styles.opacity = type ? 1 : 0
            break;
          case 'slide-top':
            styles.transform += `translateY(${type?'0':'-100%'}) `
            break;
          case 'slide-right':
            styles.transform += `translateX(${type?'0':'100%'}) `
            break;
          case 'slide-bottom':
            styles.transform += `translateY(${type?'0':'100%'}) `
            break;
          case 'slide-left':
            styles.transform += `translateX(${type?'0':'-100%'}) `
            break;
          case 'zoom-in':
            styles.transform += `scale(${type?1:0.8}) `
            break;
          case 'zoom-out':
            styles.transform += `scale(${type?1:1.2}) `
            break;
        }
      })
      return styles
    },
    // 过渡类名驼峰命名转换
    toLine(name) {
      return name.replace(/([A-Z])/g, "-$1").toLowerCase();
    }
  }
})